<template>
  <header class="my-header">
    {{ title }}
    <span class="iconfont icon-caidan" v-if="hasIcon"></span>
  </header>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "猫眼头部",
    },
    hasIcon: Boolean,
  },
};
</script>

<style scoped lang="less">
// @import "../../../assets/css/var.less";

.my-header {
  width: 375px;
  height: 52px;
  background-color: @themeColor;
  color: #fff;
  font-size: 18px;
  .center();
  position: relative;

  .icon-caidan {
    font-size: 24px !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
